<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统首页</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- import CSS -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <link href="../Mall/js/elment.css" rel="stylesheet">
    <script src="../Mall/js/main.js"></script>

    <!--    引入首页样式-->
    <link href="favicon.ico" rel="shortcut icon" />
    <link href="../../indexCss.css" rel="stylesheet" type="text/css">
    <style>
        body {

            position: relative;
            color: rgba(0, 0, 0, 0.68)
        }

        a {
            color: rgba(0, 0, 0, 0.68);
            cursor: pointer; /*加手图标*/
            text-decoration: none;
        }

        a:hover {
            color: #24407EAD;
        }

        #topdiv > div {
            margin: 60px 0;

        }
        .yuan{
            z-index: 222;
            width: 255px;
            height: 255px;
            background-image: url("../img/yuan.jpg");
            border-radius: 150px;
            margin:10px 30px 20px 0;
            text-align: center;
            padding-top: 80px;
            color: #F96B6C;
            font-size: 25px;
            font-weight: 600;
        }
        .yuan>p{
            color: #f63c3c;
            font-size: 15px;
            font-weight: 600;
        }
        #numbers{
            width: 100%;height: 25px;margin-bottom: 10px;border-radius: 5px;
            /*通过padding-left的值让文字居中*/
            padding-left: 42%;
            background-color: rgba(208, 208, 208, 0.66);
            /*清除select的边框样式*/
            border: none;
        }
        #numbers>option{
            background-color: rgba(243, 242, 242, 0.33);
            /*将select的宽高等于div的宽高*/
            width: 100%;
            height: 25px;
            line-height: 23px;

        }


    </style>
</head>
<body>
<!--动态背景画布-->
<!--<canvas id="canvas" style="height: 100%;z-index: -111;"></canvas>-->
<myheader></myheader>

<section>

    <div class="container" id="topdiv">
        <div class="row clearfix" >
            <div class="col-md-12 " style="padding: 0;position: relative;">
<!--            <div class="col-md-8 " style="padding: 0">-->
                <div class="col-md-2 " >
                    <mydiv v-bind:cls="cls" v-bind:com="comAll" v-bind:rcls="rcls" v-bind:rep="rep"></mydiv>
                </div>
                <div class="col-md-10 " id="ddd" style="float: right">
                    <div class="col-md-12">
                        <select id="numbers"  v-model="xuan" >
                            <option value="1">今天销售额</option>
                            <option value="2">今天销售数量</option>
                            <option value="3">本月销售额</option>
                            <option value="4">本月销售数量</option>
                            <option value="5">本年销售额</option>
                            <option value="6">本年销售数量</option>
                        </select>
                        <a href="UserTrans.html"><div class="col-md-3 yuan"><p>总销售额</p>{{mon.commodityMoneyAll}}<span v-show="mon.commodityMoneyAll==null">0</span><p>元</p></div></a>
                        <a href="UserTrans.html" v-show="xuan==1">  <div class="col-md-3 yuan"><p>今日销售额</p>{{mon.commodityMoneyDay}}<span v-show="mon.commodityMoneyDay==null">0</span><p>元</p></div></a>
                        <a href="UserTrans.html" v-show="xuan==2">  <div class="col-md-3 yuan"><p>今天销售数量</p>{{mon.commoditySumDay}}<span v-show="mon.commoditySumDay==null">0</span><p>件商品</p></div></a>
                        <a href="UserTrans.html" v-show="xuan==3">  <div class="col-md-3 yuan"><p>本月销售额</p>{{mon.commodityMoneyHour}}<span v-show="mon.commodityMoneyHour==null">0</span><p>元</p></div></a>
                        <a href="UserTrans.html" v-show="xuan==4">  <div class="col-md-3 yuan"><p>本月销售数量</p>{{mon.commoditySumHour}}<span v-show="mon.commoditySumHour==null">0</span><p>件商品</p></div></a>
                        <a href="UserTrans.html" v-show="xuan==5">  <div class="col-md-3 yuan"><p>本年销售额</p>{{mon.commodityMoneyYear}}<span v-show="mon.commodityMoneyYear==null">0</span><p>元</p></div></a>
                        <a href="UserTrans.html" v-show="xuan==6">  <div class="col-md-3 yuan"><p>本年销售数量</p>{{mon.commoditySumYear}}<span v-show="mon.commoditySumYear==null">0</span><p>件商品</p></div></a>
                        <a href="UserTrans.html"> <div class="col-md-3 yuan"><p>总销售量</p>{{mon.commoditySumAll}}<span v-show="mon.commoditySumAll==null">0</span><p>件商品</p></div></a>
                    </div>
                    <div class="col-md-12 li" style="padding: 0;margin-left: 10px">
                            <!--瀑布流开始-->
                            <div class="grid">
                                <div class="grid-item col-md-3" v-for="c in com" >

                                    <div class="thumbnail"   style="height: 450px; overflow: hidden">
                                        <img :src="c.url" alt="300x200" style="height: 150px" ><!--width: 400px;-->
                                        <div class="caption">
                                            <h3>
                                                <a :href="'/admin/admin/adminindexOneId.html?id='+c.id" STYLE="color:#282727;font-size: 15px">
                                                    <b>商品名:</b>{{c.name}}</a>
                                            </h3>
                                            <h5>
                                                <b>库存:</b>{{c.sum}}&nbsp;
                                                <b>已售:</b>{{c.salesnum}}&nbsp;
                                                <b>价格:</b>{{c.price}}
                                            </h5>
                                            <p style="height: 125px;overflow: hidden">
                                                <b>商品简介:</b><a :href="'/admin/admin/adminindexOneId.html?id='+c.id" STYLE="font-size: 15px">{{c.intro}}</a>
                                            </p>
                                        </div>
                                        <div style="position: absolute;bottom: 22px;right: 20px">
                                            <a :href="'/admin/admin/updateCommodity.html?id='+c.id" class="btn btn-primary btn-xs" type="button">去修改</a>
                                            <a  @click="del(c.id)" class="btn btn-danger btn-xs" type="button">删除</a>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        <el-col :offset="6" :span="12">
                            <el-pagination
                                    :current-page.sync="pageInfo.pageNum"
                                    :page-size="pageInfo.pageSize"
                                    :total="pageInfo.total"
                                    @current-change="loadCommodity"
                                    @size-change="loadCommodity"
                                    layout="total, prev, pager, next, jumper">
                            </el-pagination>
                        </el-col>
                </div>
                </div>

        </div>
    </div>

</section>
<!--正文在这里继续-->

<!--<myfooter></myfooter>-->
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--导入弹窗组件-->
<script src=" https://unpkg.com/sweetalert/dist/sweetalert.min.js "></script>
<!--引入vue和axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--&lt;!&ndash;引入footer&ndash;&gt;-->
<!--<script src="../adminjs/footer.js"></script>-->
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--引入header-->
<script src="../adminjs/header.js"></script>
<script src="../adminjs/mydiv.js"></script>
<script>

    let section_v = new Vue({
        el: "section",
        data: {
            // commodityMoneyAll:0, //总销售额
            // commodityMoneyDay:0, //今日销售额
            // commodityMoneyHour:0,      //本月销售量
            // commodityMoneyYear:0,      //本年销售量
            // commoditySumDay:0,      //今日销售量
            // commoditySumHour:0,      //本月销售量
            // commoditySumYear:0,      //本年销售量
            // commoditySum:0,      //总销售量
            mon: {},
            cls: [], //商品类集合
            com: [], //分页商品集合
            comAll: [], //商品全集合
            rcls: [], //资讯类集合
            rep: [], //资讯集合
            xuan:1, //选择日期
            date:'',  //当前时间
            pageInfo:{}, //分页全部信息
            // //绑定所要展示的商品信息属性

        },
        created: function () {
            axios.post("/admin/selectToClass").then(function (response) {
                section_v.cls = response.data;
            }),

                axios.post("/admin/selectToReportCls").then(function (response) {
                    section_v.rcls = response.data;
                }),
                axios.post("/admin/selectToReport").then(function (response) {
                    section_v.rep = response.data;
                }),
                axios.get("/trans/selectToComMoney").then(function (response) {
                   section_v.mon = response.data
                })
            axios.get("/admin/selectToCommodity").then(function (response) {
                section_v.comAll = response.data
            })
            this.loadCommodity(1)
        },
        methods: {
            loadCommodity:function (val) {
                console.log("aaa"+val)
                if(! val){
                    val = 1;
                }
                axios({
                    url: '/admin/selectToCommodityLimit',
                    method: "GET",
                    params:{
                        pageNum:val,
                    }
                }).then(function(r){
                    section_v.com = r.data.list;
                    section_v.pageInfo = r.data;
                })
            },
            getCurrentTime() {
                //获取当前时间并打印
                var _this = this;
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth()+1;
                let dd = new Date().getDate();
                _this.gettime = yy+'/'+mm+'/'+dd;
                return _this.gettime;
            },
            skip:function (id){
                location.href="adminindex.html#d"+id;///admin/adminindex.html

            },
            del:function (id){
                if(confirm("您真的要删除吗???")){
                    axios.post("/admin/CommodityDelete?id=" + id).then(function () {
                        location.reload();
                    })
                }

            }

        },
    })


</script>
<!--背景线条-->
<script src="../adminjs/bg.js"></script>　
<!--右键出字体-->
<script src="../adminjs/bgfont.js"></script>　
<!--引入动态背景js文件-->
<!--<script src="../bgjs2.js"></script>-->
</body>
</html>